<template>
  <div class="container">
    <div class="header">
      <span>订单列表</span>
      <el-select
        @change="getList"
        v-model="status"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in statusOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-table
      :data="orderList"
      style="width: 100%"
      v-loading="loading"
      element-loading-background="rgba(122,122,122,0.7)"
    >
      <el-table-column prop="order_no" label="订单号" />
      <el-table-column label="图片">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="商品名">
        <template #default="scope">
          <span>{{ scope.row.good.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="数量" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="create_time" label="时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="orderDetail(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :hide-on-single-page="pageCount != 1"
      layout="prev, pager, next"
      :page-count="pageCount"
      @current-change="changePage"
    />
  </div>
</template>

<script setup>
import { goodOrderIndex } from "@/http/api";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const orderList = ref([]);
const page = ref(1);
const limit = ref(5);
const pageCount = ref(0);
const status = ref("");
const baseUrl = import.meta.env.VITE_API_URL;
const loading = ref(false);
const statusOption = ref([
  {
    value: "",
    label: "全部",
  },
  {
    value: 0,
    label: "待付款",
  },
  {
    value: 1,
    label: "已付款",
  },
]);
onMounted(() => {
  getList();
});

const getList = async () => {
  loading.value = true;
  const { data } = await goodOrderIndex({
    status: status.value,
    page: page.value,
    limit: limit.value,
  });
  orderList.value = data.good_order.data.map((el) => {
    el.cover = baseUrl + el.good.image.split(",")[0];
    return el;
  });
  pageCount.value = data.good_order.last_page;
  loading.value = false;
};
const changePage = (e) => {
  page.value = e;
  getList();
};

const orderDetail = (e) => {
  router.push({
    path: "/order_detail",
    query: {
      id: e.id,
    },
  });
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
